<template>
  <div>
    <div class="h60">
      <span class="exnum">{{ Num }}.{{ item.title }}</span>
      <span class="labels">
        <span v-if="item.isJt == '1'">机经</span>
        <span v-if="item.isJt !== '1'" style="background: #7cc3d6">练习题</span>
        <span
          style="background: #ff5e4e"
          v-if="item.labelStyle == 'wrong-color'"
          >错题</span
        >
        <span style="background: #13bfbf" v-if="item.isYc == '1'"
          >本周预测</span
        >
        <span style="background: #94d0f7">{{ item.titleNumber }}</span>
      </span>
      <Label
        v-if="item.labelStyle != undefined"
        :df="item.labelStyle"
        :id="item.id"
      ></Label>
    </div>
    <div class="h226">
      <!-- 阅读填空区域 -->
      <el-form>
        <div class="fill-in-blank">
          <!-- 拖入区域 -->
          <span v-for="(item, index) in content" :key="index"
            >{{ item }}
            <span
              v-if="index + 1 < content.length"
              class="blk"
              ref="blk"
              @dragover.prevent="allowDrop($event)"
              @drop="handleDrop($event, item, index)"
              @dragstart="reDrag($event)"
              @dragover="handleOver($event)"
              @dragleave="handleLeave($event)"
              @dragend="handleDragend($event)"
              draggable="true"
            >
            </span>
          </span>
        </div>
      </el-form>
    </div>

    <div
      class="answer-list"
      ref="anslist"
      @drop="handleReDrop($event)"
      @dragover.prevent="allowReDrop($event)"
      v-if="subject.answer"
    >
      <!-- 拖出区域 -->
      <span
        draggable="true"
        @dragstart="handleDragStart($event, index)"
        @dragend="handleDragEnd"
        @dragenter="dragReEnter"
        v-for="(item, index) in answerList"
        :key="index"
        class="chooseItem"
        >{{ item }}</span
      >
    </div>
    <div class="time">
      <span>答题时间：{{ s_to_hs(answerTime) }}</span>
    </div>
  </div>
</template>

<script>
import { sendPost, uploadFile } from "@/utils/http";
import readingUtil from "@/utils/readingUtil";
import api from "@/config/api";
export default {
  mixins: [readingUtil],
  props: ['item', 'Num'],
  data () {
    return {
      content: [],
      subject: {},
      answerTime: 0,
      subAnswerList: [],
      answerlen: 0
    }
  },
  created () {
    this.getData()
    setInterval(this.countUpTime, 1000)


  },

  mounted () {

    if (this.item.answer) {
      // 回显答案
      this.item.answer.split(',').forEach(ele => {
        this.subAnswerList.push(ele)
      })
      var that = this

      setTimeout(() => {
        that.$refs.blk.forEach((item, index) => {
          item.innerText = that.subAnswerList[index]
        })
      }, 1800);

    }

  },

  methods: {
    // 计算答案的个数
    getAnswerLength () {
      this.answerlen = 0
      this.subAnswerList.forEach(item => {
        if (item !== '') {
          this.answerlen++
        }
      })
    },
    getData () {
      var that = this
      sendPost(api.getSubjectDetails, {
        id: this.item.subjectId,
      }).then((res) => {
        // console.log(res.data)
        that.subject = res.data
        // console.log(res.data.content.split('(PARAM)'));
        that.content = res.data.content.split('(PARAM)')
        that.answerList = res.data.option.split('&@#')

      })
    },
    //开始拖拽事件
    handleDragStart (e, idx) {
      this.subAnswerList = []
      this.flag = true

      // console.log(e.target.innerText);
      this.txt = e.target.innerText
      this.idx = idx
      // console.log(e.target);
      e.target.style.opacity = ".4"
    },
    //拖拽结束事件
    handleDragEnd (e) {
      e.target.style.opacity = "1"
      // this.answerList=[...new Set(this.answerList)]
      this.$emit('sendAnswer', this.subAnswerList.join(','))

      this.getAnswerLength()

      // 答案个数是否不足
      this.$emit('sendAnswerLen', this.answerlen < this.content.length - 1)

    },
    handleOver (e) {
      e.target.style.backgroundColor = "#ff5e4e"
      e.target.style.border = "1px solid #ff5e4e"
      e.target.style.opacity = ".4"
    },
    handleLeave (e) {
      e.target.style.backgroundColor = "#fff"
      e.target.style.border = "1px solid #eee"
      e.target.style.opacity = "1"
    },

    handleDrop (e, item, idx) {



      this.isToBlkFlag = false

      e.target.style.backgroundColor = "#fff"
      e.target.style.border = "1px solid #eee"
      e.target.style.opacity = "1"

      if (this.flag == true) { // 说明答案来自于答案列表，不来自于空格兄弟
        this.flag = false  // 说明从答案拖进了空格
        // console.log(e.toElement);
        // console.log(e.target);
        if (e.toElement.innerText == '') {  // 空空格：赋值，删列表
          e.toElement.innerText = this.txt
          this.answerList.splice(this.idx, 1)
        } else {
          this.answerList.push(e.target.innerText)  // 已经有值：覆盖，删列表，把覆盖的那个值加到列表
          // console.log(e.toElement.innerText);
          e.toElement.innerText = this.txt
          this.answerList.splice(this.idx, 1)
        }

        this.subAnswerList = []
        this.$refs.blk.forEach(item => {
          // console.log(item.innerText);
          this.subAnswerList.push(item.innerText)
        })
        console.log(this.subAnswerList);
        // this.$emit('sendAnswer', this.subAnswerList.join(','))

        let len = 0
        for (var i = 0; i < this.subAnswerList.length; i++) {
          if (this.subAnswerList[i] !== '') {
            len++
          }
        }
        if (len < this.$refs.blk.length) {
          this.$emit('nodone')
        } else {
          //  this.$emit('sendNum', this.answerList.length)
          this.$emit('sendAnswer', this.subAnswerList.join(','))

          this.getAnswerLength()
          // 答案个数是否不足
          this.$emit('sendAnswerLen', this.answerlen < this.content.length - 1)

        }
      } else {



        // 兄弟之间转移值
        if (e.toElement.innerText == '') { // 兄弟空
          e.toElement.innerText = this.txt
          // this.answerList.splice(this.idx, 1)

          this.subAnswerList = []
          this.$refs.blk.forEach(item => {
            // console.log(item.innerText);
            this.subAnswerList.push(item.innerText)
          })

          let len = 0
          for (var i = 0; i < this.subAnswerList.length; i++) {
            if (this.subAnswerList[i] !== '') {
              len++
            }
          }
          if (len < this.$refs.blk.length) {
            this.$emit('nodone')
          } else {
            //  this.$emit('sendNum', this.answerList.length)
            this.$emit('sendAnswer', this.subAnswerList.join(','))

            this.getAnswerLength()
            // 答案个数是否不足
            this.$emit('sendAnswerLen', this.answerlen < this.content.length - 1)

          }


          console.log(this.subAnswerList);
        } else {
          this.answerList.push(e.target.innerText)
          e.toElement.innerText = this.txt

          this.subAnswerList = []
          this.$refs.blk.forEach(item => {
            this.subAnswerList.push(item.innerText)
          })

          let len = 0
          for (var i = 0; i < this.subAnswerList.length; i++) {
            if (this.subAnswerList[i] !== '') {
              len++
            }
          }
          if (len < this.$refs.blk.length) {
            this.$emit('nodone')
          } else {
            //  this.$emit('sendNum', this.answerList.length)
            this.$emit('sendAnswer', this.subAnswerList.join(','))

            this.getAnswerLength()
            // 答案个数是否不足
            this.$emit('sendAnswerLen', this.answerlen < this.content.length - 1)

          }


          console.log(this.subAnswerList);
        }
      }

    },
    allowDrop (e) {
      e.target.style.color = "#999"

    },
    allowReDrop (e) {
    },
    // 从空格拖出
    reDrag (e) {

      console.log(e);

      // console.log(this.txt);
      if (e.target.innerText != '') {
        this.reDragFlag = true
        this.isToBlkFlag = true
        this.txt = e.target.innerText
        if (this.txt != '') {
          e.target.innerText = ''
        }
      } else {
        this.txt = ''
      }
    },
    // 空格内的内容有没有拖到答案列表
    handleDragend (e) {
      if (this.reDragFlag && this.isToBlkFlag) {
        console.log(e.target.innerText);
        this.answerList.push(this.txt)
      }

    },
    // 空格拖出放入列表
    handleReDrop (e) {
      this.reDragFlag = false

      if (this.flag) {
        return
      }
      if (this.txt != '') {
        // console.log(e.target.innerText);
        this.answerList.push(this.txt)
        this.txt = ''
      }

    },
    dragReEnter () {
      this.$refs.anslist.border = "1px solid #000"
      this.$refs.anslist.backgroundColor = "#abcdef"

    },
  },

}
</script>

<style lang="less" scoped>
.fib-answer {
  display: inline-block;
  // height: 2.125rem;
  line-height: 2.125rem;
  padding: 0 0.375rem;
  vertical-align: middle;
  // border-radius: 0.375rem;
  color: #13bfbf;
  // border: 1px solid #13bfbf;
}
.chooseItem {
  margin-right: 0.5rem;
}
.blk {
  display: inline-block;
  padding: 0 0.375rem;
  height: 1.875rem;
  width: 8.75rem;
  line-height: 1.875rem;
  border-radius: 0.3125rem;
  border: 1px solid #eee;
  background-color: #fff;
  vertical-align: middle;
  text-align: center;
}

.answer-item {
  margin-right: 1rem;
  font-size: 1.25rem;
  color: #333;
}
.h60 {
  height: 3.75rem;
  line-height: 3.75rem;
  padding-left: 1.25rem;
  box-sizing: border-box;
  background-color: #f7f7f7;
  display: flex;
  margin-bottom: 1rem;
  position: relative;
  .exnum {
    width: 45rem;
    font-size: 1rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labels {
    display: flex;
    justify-content: flex-end;
    width: 21.25rem;
    span {
      height: 1.875rem;
      line-height: 1.875rem;
      padding: 0 0.375rem;
      box-sizing: border-box;
      background-color: #ff9b4f;
      border-radius: 0.1875rem;
      margin: 0.9375rem 0.46875rem;
      color: #fff;
      box-sizing: border-box;
    }
  }
}
.h226 {
  margin: 3.125rem 0 1.5625rem;
  width: 100%;
  background: #fffafa;
  border: 1px dashed #ff5e4e;
  border-bottom: 1px dashed #ff5e4e !important;
  box-sizing: border-box;
  padding: 1.25rem 1.75rem 1.6875rem;
  box-sizing: border-box;
  font-size: 1.125rem;
  color: #666;
  line-height: 3rem;
  padding-top: 2.625rem;
  .el-input {
    width: 10.25rem;
  }
  /deep/.el-input__inner {
    height: 2rem;
    border-radius: 0;
  }
  .right {
    border-color: #13bfbf;
    color: #13bfbf;
  }
  .wrong {
    border-color: #ff5e4e;
    color: #ff5e4e;
  }
}
.answer-list {
  padding: 0.625rem 0;
  line-height: 3.75rem;
  span {
    padding: 0.5rem 0.625rem;
    background-color: #ff5e4e;
    color: #fff;
    font-size: 1.125rem;
    border-radius: 0.2875rem;
    cursor: pointer;
  }
}

.time {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  position: relative;
  margin-top: 1.875rem;
  span {
    margin-right: 1.875rem;
  }
  .iconfont {
    font-size: 1.5rem;
    color: #ccc;
  }
  .end {
    position: absolute;
    right: -1.5rem;
    text-align: right;
  }
}
</style>